
<template>
  <div>
    <el-card>
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>个人设置</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-row>
        <el-col :span="12">
          <el-form :model="userForm" :rules="userFormRelus" ref="userFormRef" label-width="100px">
            <el-form-item label="编号：">
              {{userForm.id}}
            </el-form-item>
            <el-form-item label="手机：">
              {{userForm.mobile}}
            </el-form-item>
            <el-form-item label=" 媒体名称：" prop="name">
              <el-input type="text" v-model="userForm.name"></el-input>
            </el-form-item>
            <el-form-item label="  媒体介绍：" prop="intro">
              <el-input type="textarea" v-model="userForm.intro"></el-input>
            </el-form-item>
            <el-form-item label="   邮箱：" prop="email">
              <el-input type="text" v-model="userForm.email"></el-input>
            </el-form-item>
            <el-form-item class="lastchildren">
              <!-- <el-button type="info">重置</el-button> -->
              <el-button @click="SaveProfile" type="primary">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :offset="3" :span="7">
          <label for="file">
            <el-image :src="userForm.photo" fit="cover"></el-image>
            <p>点击更换头像</p>
          </label>
          <input type="file" @change="onFileChange" ref="fileRef" id='file' hidden>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog title="更换头像" :visible.sync="dialogVisible" @opened="openDialog">
      <div> <img class="imageRef" ref="imageRef" :src="proviewImage"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button :loading='uploading' type="primary" @click="updateImage">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'
import { getUserProfile, updateUserProfile, updateUserPhoto } from '@/api/user.js'
import GlobalBus from '@/api/globalbus.js'
export default {
  data() {
    return {
      userForm: {
        email: '',
        name: '',
        photo: '',
        mobile: '',
        intro: '',
        id: ''
      },
      cropper: null,
      proviewImage: '',
      userFormRelus: {
        name: [
          { required: true, message: '请输入媒体名称', trigger: 'blur' },
          { min: 1, max: 7, message: '长度在 1 到 7 个字符', trigger: 'blur' }
        ],
        intro: [{ required: true, message: '请输入媒体介绍', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }]
      },
      dialogVisible: false,
      uploading: false
    }
  },
  created() {
    this.loadprofile()
  },
  methods: {
    loadprofile() {
      getUserProfile().then(res => {
        this.userForm = res.data.data
      })
    },
    SaveProfile() {
      this.$refs.userFormRef.validate(valid => {
        if (!valid) return
        updateUserProfile(this.userForm)
          .then(res => {
            this.$message.success('修改用户信息成功！')
            GlobalBus.$emit('update-user', res.data.data)
          })
          .catch(() => {
            this.$message.error('修改用户信息失败！')
          })
      })
    },
    onFileChange() {
      const file = this.$refs.fileRef.files[0]
      this.proviewImage = window.URL.createObjectURL(file)
      this.dialogVisible = true
      this.$refs.fileRef.value = ''
    },
    openDialog() {
      const image = this.$refs.imageRef
      if (this.cropper) {
        this.cropper.replace(this.proviewImage)
        return
      }
      this.cropper = new Cropper(image, {
        aspectRatio: 1,
        movable: false,
        background: false,
        dragMode: 'none'
      })
    },
    updateImage() {
      this.uploading = true
      this.cropper.getCroppedCanvas().toBlob(blob => {
        const fd = new FormData()
        fd.append('photo', blob)
        updateUserPhoto(fd)
          .then(() => {
            this.$message.success('修改用户头像成功！')

            this.userForm.photo = window.URL.createObjectURL(blob)
            GlobalBus.$emit('update-user', this.userForm)
            this.dialogVisible = false
            this.uploading = false
          })
          .catch(() => {
            this.$message.error('修改用户头像失败！')
            this.uploading = false
          })
      })
    }
  }
}
</script>
<style scoped>
.el-card {
  height: 600px;
}
.el-image {
  margin-top: 30px;
  width: 180px;
  height: 180px;
  border-radius: 5px;
  border: 1px solid #cccccc;
  overflow: hidden;
}
.el-col:last-child {
  text-align: center;
}
.imageRef {
  display: block;
  min-width: 100%;
  height: 400px;
}
</style>
